<template>
<div class="box">
  <el-radio-group class="radio" v-model="radio" @change="handleChange">
    <el-radio-button label="a" >交易数据</el-radio-button>
    <el-radio-button label="b">浏览数据</el-radio-button>
    <el-radio-button label="c" >收入数据</el-radio-button>
    <el-radio-button label="d" >用户活跃</el-radio-button>
  </el-radio-group>
  <div id="echarts" ref="myHeading" style="width: 100%; height: 100%"></div>
</div>
</template>

<script setup lang="ts">
import echartsA from '../../modules/echarts'
// import * as echarts from "echarts";
import {ref, onMounted} from 'vue'
const myHeading = ref(null);
// 单选框值
const radio = ref('a')
const handleChange =(value:any)=> {
  // 处理change事件
  console.log(value);
  console.log(myHeading.value)
  echartsA(myHeading.value, radio.value)
}
// onMounted(() => { console.log('生命周期函数的渲染完成钩子');})
onMounted(() => {
  console.log("生命周期函数的渲染完成钩子!")
  echartsA(myHeading.value, radio.value)
});
// function onMounted(callback: () => void): void
</script>

<style lang="scss" scoped>
.box{
  position: relative;
  width: 100%;
  margin-top: 40px;
  height: 366px;
  background-color: #ffffff;
  box-shadow: 0 10px 16px 0
  rgba(132, 132, 152, 0.34);
  border-radius: 10px;
  .radio {
    position: absolute;
    top: 5%;
    left: 15%;
    z-index: 100;
  }
}
</style>
